<template>
  <view :style="{ background: background, paddingTop: statusBarHeight + 'px' }" class="navigation pb-19">
    <view class="f jc-s-b ai-c ph-36 pt-20 h-68">
        <!-- 左侧占位 -->
      <view class="w-40" v-show="backType === ''"></view>
      <!-- 返回 -->
      <view v-show="backType == 'back'">
        <image src="../../static/back.png" class="w-40 h-40" @click="handleBack"></image>
      </view>
      <!-- 标题 -->
      <view class="fs-36 fw-600 text-color1" v-show="title != 'city'" :style="{ color: titleColor }">{{ title }}</view>
      <!-- 右侧占位 -->
      <view class="w-40" v-show="rightType === ''"></view>
       <!-- 全部已读 -->
       <view class="fs-28 fw-500 text-color1 mp-weixin" v-show="rightType === 'read'" @click='allRead'>全部已读</view>
    </view>
  </view>
  <!-- 占位 -->
  <view class="w-f pb-19" id="navigationTop" :style="{ paddingTop: statusBarHeight + 'px' }" v-show="isSeat">
    <view class="w-f h-68"></view>
  </view>
</template>
<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { create } from 'domain';
import { messageAllRead } from '@/services/api/index';
const emit = defineEmits(['handleBack']);
const authStore = useAuthStore();
const props = defineProps({
    backType: {
        type: String,
        default: '', //close  back city
    },
    title: {
        type: String,
        default: '',
    },
    background: {
        type: String,
        default: '',
    },
    rightType: {
        type: String,
        default: '', //share news collectShare
    },
    titleColor: {
        //标题颜色
        type: String,
        default: '',
    },
    isSeat: {
        //是否显示占位
        type: Boolean,
        default: true,
    },
    listenBack: {
        //监听返回按钮
        type: Boolean,
        default: false,
    },
});
//城市
const cityName = ref(authStore.getCity);
watch(
    () => [authStore.getCity],
    ([newVaild]) => {
        cityName.value = newVaild as string;
    }
);
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;

const handleBack = () => {
    if (props.listenBack) {
        emit('handleBack');
        return;
    }
    uni.navigateBack();
};
async function allRead() {
    await messageAllRead();
}
</script>
<style lang="scss" scoped>
.navigation {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    .dian {
        position: relative;
    }
    .red-dian {
        background: #f54040;
        border-radius: 50%;
        position: absolute;
        right: -10rpx;
        top: -10rpx;
    }
}
</style>
